<template>
  <div>
    <div class="top">
      <div class="topfix">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wangyiyunyinle"></use>
        </svg>
        <div class="title">网易云音乐</div>
        <router-link to="/test">
          <span style="padding:5px; background-color: aqua;border: 1px solid #333">test</span>
        </router-link>
        <router-link to="/note">
          <span style="padding:5px; background-color: aqua;border: 1px solid #333">note</span>
        </router-link>
      </div>
      <div class="download">
        <button>下载APP</button>
      </div>
    </div>
    <!--top下面的空白-->
    <div class="blank"></div>
  </div>
</template>
  
<script setup>
</script>
  
<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: #d43c33;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  .topfix {
    display: flex;
    align-items: center;
    .icon {
      width: 26px;
      height: 26px;
    }
    .title {
      color: #fff;
      font-family: Helvetica, sans-serif, STHeiTi;
      font-size: 21px;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 1.5px;
      padding: 0 10px 0 8px;
      margin-top: -2px;
    }
  }
  .download {
    button {
      background-color: rgb(255, 255, 255);
      width: 100px;
      height: 36px;
      border-radius: 20px;
      border: none;
      text-align: center;
      color: rgb(212, 60, 51);
      font-size: 16px;
    }
  }
}
.blank {
  background-color: #d43c33;
  width: 100%;
  height: 84px;
}
</style>